<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Zen Coding(ZMMET)</title>
    script
</head>
<body>

<!--Zen HTML 和 Zen CSS 两部分-->
<!--Zen Coding，一组用于快速HTML和CSS编码的工具-->





<!--head-->
<head></head>
<!--title-->
<title></title>
<!--base-->
<base href="">
<!--link-->
<link rel="stylesheet" href="">
<!--link:css-->
<link rel="stylesheet" href="style.css">
<!--link:rss-->
<link rel="alternate" type="application/rss+xml" title="RSS" href="rss.xml">
<!--link:print-->
<link rel="stylesheet" href="print.css" media="print">
<!--link:favicon-->
<link rel="shortcut icon" type="image/x-icon" href="favicon.ico">
<!--meta-->
<meta>
<!--meta:utf-->
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<!--meta:win-->
<meta http-equiv="Content-Type" content="text/html;charset=windows-1251">
<!--meta:compat-->
<meta http-equiv="X-UA-Compatible" content="IE=7">
<!--script:src-->
<script src=""></script>



<!--* E-->
<!--元素名称(div, p);-->
<!--* E#id-->
<!--使用id的元素(div#content, p#intro, span#error);-->
<!--* E.class-->
<!--使用类的元素(div.header, p.error.critial). 你也可以联合使用class和idID: div#content.column.width;-->
<!--* E>N-->
<!--子代元素(div>p, div#footer>p>span);-->
<!--* E+N-->
<!--兄弟元素(h1+p, div#header+div#content+div#footer);-->
<!--* E*N-->
<!--元素倍增(ul#nav>li*5>a);-->
<!--* E$*N-->
<!--条目编号 (ul#nav>li.item-$*5);-->

<!--*************************id和类********************************-->
<!--div.-->
<div class=""></div>
<!--div.container-->
<div class="container"></div>
<!--.container-->
<div class="container"></div>
<!--.warp>ul.list>.sites-->
<div class="warp">
    <ul class="list">
        <li class="sites"></li>
    </ul>
</div>
<!--.warp>ul.list>div>a.test-->
<div class="warp">
    <ul class="list">
        <div><a href="" class="test"></a></div>
    </ul>
</div>
<div class="warp">
    <ul class="list">
        <li class="sites"></li>
    </ul>
</div>
<!--***********************************************************************************************-->
<!--&gt; 子节点：在DOM树下一层添加创建一个元素-->
<!--+ 同级别：在DOM树同一层添加创建一个元素-->
<!--^ 向上层：向上一层添加创建创建一个元素。-->
<!--“#”表id，“.”表类，“+”表并列-->
<!--div.ok等同于.ok，div#no等同于#no，所以直接写.或#时，默认为Div标签是也-->
<!--div#-->
<!--#-->
<!--div#-->
<div id=""></div>
<!--div#ader+div.content+div.sidebar+div#footer-->
<div id="ader"></div>
<div class="content"></div>
<div class="sidebar"></div>
<div id="footer"></div>

<!--.divouter>.inner>h1+p-->
<div class="divouter">
    <div class="inner">
        <h1></h1>
        <p></p>
    </div>
</div>
<!--div#a+div#content.aticle.posts+div#sidebar.ad+div#oter-->
<div id="a"></div>
<div id="content" class="aticle posts"></div>
<div id="sidebar" class="ad"></div>
<div id="oter"></div>
<!--div>p>span>a-->
<div>
    <p><span><a href=""></a></span></p>
</div>
<!--html>head+body>div.header+div.content+div.footer-->
<html>
<head></head>
<body>
<div class="header"></div>
<div class="content"></div>
<div class="f"></div>
</body>
</html>ooter
<!--.wrap>p+a>p-->
<div class="wrap">
    <p></p>
    <a href="">
        <p></p>
    </a></div>

<!--.wrap>p>a^p-->
<div class="wrap">
    <p><a href=""></a></p>
    <p></p>
</div>

<!--.wrap>p>em-->
<div class="wrap">
    <p><em></em></p>
</div>

<!--.wrap>p>em>a-->
<div class="wrap">
    <p><em><a href=""></a></em></p>
</div>

<!--.wrap>p>em>a^^p-->
<div class="wrap">
    <p><em><a href=""></a></em></p>
    <p></p>
</div>


<!--(.one>h1)+(#two>h1)-->
<div class="one">
    <h1></h1>
</div>
<div id="two">
    <h1></h1>
</div>

<!--.one>h1+div>h1-->
<div class="one">
    <h1></h1>
    <div>
        <h1></h1>
    </div>
</div>

html>(head>title+style+script)+(body>div.content>.nav+.sude+.main)
<html>
<head><title></title>
    <style></style>
    <script></script>
</head>
<body>
<div class="content">
    <div class="nav"></div>
    <div class="sude"></div>
    <div class="main"></div>
</div>
</body>
</html>


<!--html>(head>title+style+script)+body>(div.content>div.nav+div.sidebar+div.main)+div.footer-->

<html>
<head><title></title>
    <style></style>
    <script></script>
</head>
<body>
<div class="content">
    <div class="nav"></div>
    <div class="sidebar"></div>
    <div class="main"></div>
</div>
<div class="footer"></div>
</body>
</html>





<!--**************************“()”指同级范围*******************-->
<!--“()”指同级范围-->
<!--html>(head>title+style+script)+(body>div.content>div.nav+div.sidebar+div.main)+div.footer-->
<html>
<head><title></title>
    <style></style>
    <script></script>
</head>
<body>
<div class="content">
    <div class="nav"></div>
    <div class="sidebar"></div>
    <div class="main"></div>
</div>
</body>
<div class="footer"></div>
</html>




<!--**************************[]”表属性*******************-->
<!--[]”表属性-->
<!--a[title=test target=_self]-->
<a href="" title="test" target="_self"></a>
<!--h1[title=something]-->
<h1 title="something"></h1>

<!--div#content1>div.aticle>h1.ok[title=papername sytle=color:#000;]+h3[title=subname][sytle=color:#fff;].no+p.words-->
<div id="content1">
    <div class="aticle">
        <h1 class="ok" title="papername" sytle="color:#000;"></h1>
        <h3 title="subname" sytle="color:#fff;" class="no"></h3>
        <p class="words"></p>
    </div>
</div>
<!--div>h1{adf a}-->
<div>
    <h1>adf a</h1>
</div>

<!--ul>li^div-->
<ul>
    <li></li>
</ul>
<div></div>

<!--(div>h1)+div-->
<div>
    <h1></h1>
</div>
<div></div>




<!--********************************************* 并列：+ *******************************************-->
<!--div>h1+div-->
<div>
    <h1></h1>
    <div></div>
</div>
<!--div>h>h+h-->
<div>
    <h>
        <h></h>
        <h></h>
    </h>
</div>
<!--***************************************  ^ 上级多层 ***************************************-->
<!--ul>li>a^^div-->
<ul>
    <li><a href=""></a></li>
</ul>
<div></div>

<!--ul>li>a^div-->
<ul>
    <li><a href=""></a></li>
    <div></div>
</ul>
<!--************************************ 字符操作：{} **********************************-->
<!--插入文本和属性  生成HTML，内容和属性也是你常常需要添加的-->
<!--字符操作：{}-->
<!--h1{wuhe}-->
<h1>wuhe</h1>
<!--h1{wuhe}+p{abc123}-->
<h1>wuhe</h1>
<p>abc123</p>
<!--a[href="www.baidu.com"]{百度}     -->
<a href="www.baidu.com">百度</a>
<!--.one.two.three-->
<div class="one two three"></div>
<!--ul>li*3-->
<ul>
    <li></li>
    <li></li>
    <li></li>
</ul>
<!--属性值-->

<!--a[title=test target=_self]-->
<a href="" title="test" target="_self"></a>

<!--*********************************数列操作符：@  *************************************-->
<!--数列操作符：@-->
<!--@- = -1 -->
<!--p.item$@-*3-->
<p class="item3"></p>
<p class="item2"></p>
<p class="item1"></p>
<!--@3 = 从3开始3次-->
<!--p.item$@3*3  -->
<p class="item3"></p>
<p class="item4"></p>
<p class="item5"></p>
<!--@-3 = 3次后到3结束-->
<!--p.item$@-3*3-->
<p class="item5"></p>
<p class="item4"></p>
<p class="item3"></p>


<!--************************************重复："* "  ********************************-->
<!--重复：*-->
<!--(section>.wrap)*2-->
<section>
    <div class="wrap"></div>
</section>
<section>
    <div class="wrap"></div>
</section>


<!--#ddd>ul>li*4>a-->
<div id="ddd">
    <ul>
        <li><a href=""></a></li>
        <li><a href=""></a></li>
        <li><a href=""></a></li>
        <li><a href=""></a></li>
    </ul>
</div>
<!--div#er>ul.navigation>li*4>a-->
<div id="er">
    <ul class="navigation">
        <li><a href=""></a></li>
        <li><a href=""></a></li>
        <li><a href=""></a></li>
        <li><a href=""></a></li>
    </ul>
</div>




<!--******************************“$”表连续数************************************-->
<!--“$”表连续数-->
<!--数列值：$-->
<!--div.haha>ul.nav>li.num-$*6>a>span{num$}-->
<!--不论在属性如li.li-$或是id或是{}中的内容，$就代表从1开始的序列-->
<div class="haha">
    <ul class="nav">
        <li class="num-1"><a href=""><span>num1</span></a></li>
        <li class="num-2"><a href=""><span>num2</span></a></li>
        <li class="num-3"><a href=""><span>num3</span></a></li>
        <li class="num-4"><a href=""><span>num4</span></a></li>
        <li class="num-5"><a href=""><span>num5</span></a></li>
        <li class="num-6"><a href=""><span>num6</span></a></li>
    </ul>
</div>
<!--数列值：$-->
<!--p.item$*3-->
<p class="item1"></p>
<p class="item2"></p>
<p class="item3"></p>
<!--ul>li.item${item $$}*3-->
<ul>
    <li class="item1">item 01</li>
    <li class="item2">item 02</li>
    <li class="item3">item 03</li>
</ul>
<!--ul>li#item${item $$}*3-->
<ul>
    <li id="item1">item 01</li>
    <li id="item2">item 02</li>
    <li id="item3">item 03</li>
</ul>





<!--table>thead>td.col$*4+tbody>(tr>td.col$*4)*2+tfoot>td*4-->
<table>
    <thead>
    <td class="col1"></td>
    <td class="col2"></td>
    <td class="col3"></td>
    <td class="col4"></td>
    <tbody>
    <tr>
        <td class="col1"></td>
        <td class="col2"></td>
        <td class="col3"></td>
        <td class="col4"></td>
    </tr>
    <tr>
        <td class="col1"></td>
        <td class="col2"></td>
        <td class="col3"></td>
        <td class="col4"></td>
    </tr>
    <tfoot>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    </tfoot>
    </tbody></thead></table>

<!--table>(thead>td.col$*4)+(tbody>tr.row$$*3>td.col$*4)+tfoot>td*4-->
<table>
    <thead>
    <td class="col1"></td>
    <td class="col2"></td>
    <td class="col3"></td>
    <td class="col4"></td>
    </thead>
    <tbody>
    <tr class="row01">
        <td class="col1"></td>
        <td class="col2"></td>
        <td class="col3"></td>
        <td class="col4"></td>
    </tr>
    <tr class="row02">
        <td class="col1"></td>
        <td class="col2"></td>
        <td class="col3"></td>
        <td class="col4"></td>
    </tr>
    <tr class="row03">
        <td class="col1"></td>
        <td class="col2"></td>
        <td class="col3"></td>
        <td class="col4"></td>
    </tr>
    </tbody>
    <tfoot>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    </tfoot>
</table>

<!--div#header>ul#navigation>li.item$*>a>span:-->
<div id="header">
    <ul id="navigation">
        <li class="item0"><a href=""></a></li>
    </ul>
</div>

<!--ul.nav>li*5>a-->

<ul class="nav">
    <li><a href=""></a></li>
    <li><a href=""></a></li>
    <li><a href=""></a></li>
    <li><a href=""></a></li>
    <li><a href=""></a></li>
</ul>

<!--div.-->
<div class=""></div>


<div>
    <p><a href=""></a></p>
</div>
<div>
    <p></p>
    <a href=""></a>
</div>



<!--***************************cc:****************************-->
<!--cc:ie6-->
<!--[if lte IE 6]>

<![endif]-->

<!--cc:ie-->
<!--[if IE]>

<![endif]-->



<!--table>tr.row*4>td.cell*3-->
<table>
    <tr class="row">
        <td class="cell"></td>
        <td class="cell"></td>
        <td class="cell"></td>
    </tr>
    <tr class="row">
        <td class="cell"></td>
        <td class="cell"></td>
        <td class="cell"></td>
    </tr>
    <tr class="row">
        <td class="cell"></td>
        <td class="cell"></td>
        <td class="cell"></td>
    </tr>
    <tr class="row">
        <td class="cell"></td>
        <td class="cell"></td>
        <td class="cell"></td>
    </tr>
</table>